import React, { Component, Fragment } from 'react';
import { Modal, Table } from 'antd';
import RightLineModal from '../RightLineModal';

const columns = [
  {
    title: '排名',
    dataIndex: 'ranking',
    key: 'ranking',
  },
  {
    title: '数据源名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '渠道',
    dataIndex: 'channel',
    key: 'channel',
  },

  {
    title: '归属电厂',
    dataIndex: 'plant',
    key: 'plant',
  },
  {
    title: '应采量(条)',
    dataIndex: 'shouldCaiLiang',
    key: 'shouldCaiLiang',
  },
  {
    title: '实采量(条)',
    dataIndex: 'trueCaiLiang',
    key: 'trueCaiLiang',
  },
  {
    title: '异常率(%)',
    dataIndex: 'abnormalRate',
    key: 'abnormalRate',
  },
];

const data = [
  {
    key: '1',
    ranking: '1',
    name: '垃圾铁',
    channel: 'SIS',
    plant: '五华电厂',
    shouldCaiLiang: '1',
    trueCaiLiang: '1',
    abnormalRate: '80',
  },
  {
    key: '2',
    ranking: '1',
    name: '垃圾铁',
    channel: 'SIS',
    plant: '五华电厂',
    shouldCaiLiang: '1',
    trueCaiLiang: '1',
    abnormalRate: '80',
  },
  {
    key: '3',
    ranking: '1',
    name: '垃圾铁',
    channel: 'SIS',
    plant: '五华电厂',
    shouldCaiLiang: '1',
    trueCaiLiang: '1',
    abnormalRate: '80',
  },
  {
    key: '4',
    ranking: '1',
    name: '垃圾铁',
    channel: 'SIS',
    plant: '五华电厂',
    shouldCaiLiang: '1',
    trueCaiLiang: '1',
    abnormalRate: '80',
  },
  {
    key: '5',
    ranking: '1',
    name: '垃圾铁',
    channel: 'SIS',
    plant: '五华电厂',
    shouldCaiLiang: '1',
    trueCaiLiang: '1',
    abnormalRate: '80',
  },
  {
    key: '6',
    ranking: '1',
    name: '垃圾铁',
    channel: 'SIS',
    plant: '五华电厂',
    shouldCaiLiang: '1',
    trueCaiLiang: '1',
    abnormalRate: '80',
  },
  {
    key: '7',
    ranking: '1',
    name: '垃圾铁',
    channel: 'SIS',
    plant: '五华电厂',
    shouldCaiLiang: '1',
    trueCaiLiang: '1',
    abnormalRate: '80',
  },
  {
    key: '8',
    ranking: '1',
    name: '垃圾铁',
    channel: 'SIS',
    plant: '五华电厂',
    shouldCaiLiang: '1',
    trueCaiLiang: '1',
    abnormalRate: '80',
  },
  {
    key: '9',
    ranking: '1',
    name: '垃圾铁',
    channel: 'SIS',
    plant: '五华电厂',
    shouldCaiLiang: '1',
    trueCaiLiang: '1',
    abnormalRate: '80',
  },
];

export default class RightTableModal extends Component {
  state = { chartVisible: false };

  modalCancel = () => {
    this.setState({ chartVisible: false });
  };

  render() {
    const { visible, handleCancel } = this.props;
    const { chartVisible } = this.state;

    return (
      <Fragment>
        <Modal
          title={'数据源数据质量异常排名'}
          visible={visible}
          onCancel={handleCancel}
          footer={null}
          width={'80%'}
          maskClosable={false}
          centered
        >
          <Table
            columns={columns}
            dataSource={data}
            onRow={record => {
              return {
                onClick: event => {
                  // 点击行
                  this.setState({ chartVisible: true });
                },
              };
            }}
          />
        </Modal>

        <RightLineModal visible={chartVisible} modalCancel={this.modalCancel} />
      </Fragment>
    );
  }
}
